<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  
</body>
<script>

  // 要代理的目标对象
  const target = {
    name:"admin",
    age:18,
    sex:"男",
    msg:" hello world "
  };

  // 开启代理：参数1为目标对象，参数2为配置对象
  const p = new Proxy(target, {
    // 访问器处理程序：目标对象，本次访问的属性
    get(target, attr){
      console.log(`有人访问了`, target, `的${attr}属性`)
      return target[attr];
    },
    // 控制器处理程序：目标对象，本次设置的属性，要设置的值
    set(target, attr, val){
      target[attr] = val;
      console.log(`有人修改了`,target,`的${attr}属性为：`,val);
    }
  });

  // 代理之后，添加新属性，新属性也具备访问器和控制器
  target.abc = "😀";

  console.log(p);

  p.name
  p.age

  p.name = "root"
  
  console.log(p);
</script>
</html>